<template>  
  <div  
    class="fixed-icon-container"  
    :style="{ top: `${top}px`, left: `${left}px` }"  
    @mousedown="dragStart"  
  >  
    <div class="fixed-icon-stack">  
      <div class="fixed-icon" :style="{ backgroundImage: 'url(' + imgUrl + ')' }">
      </div>  
      <div class="badge" v-if="showBadge">{{ floatCount }}</div>  
    </div>  
  </div>  
</template>  
<script>  
import { mapGetters } from 'vuex';

export default {  
  name: 'DraggableFixedIcon',  
  data() {  
    return {  
      dragging: false,  
      startX: 0,  
      startY: 0,  
      left: window.innerWidth * 0.94, // 初始位置  
      top: window.innerWidth * 0.52, // 初始位置  
      showBadge: true, // 是否显示徽章（伪元素已替换为实际元素）
      imgUrl: require('@/assets/聊天.png'),   
    };  
  },  
  methods: {  
    dragStart(e) {  
      this.dragging = true;  
      this.startX = e.pageX - this.left;  
      this.startY = e.pageY - this.top;  
      document.addEventListener('mousemove', this.drag);  
      document.addEventListener('mouseup', this.dragEnd);  
    },  
    drag(e) {  
      if (!this.dragging) return;  
      this.left = e.pageX - this.startX;  
      this.top = e.pageY - this.startY;  
    },  
    dragEnd() {  
      this.dragging = false;  
      document.removeEventListener('mousemove', this.drag);  
      document.removeEventListener('mouseup', this.dragEnd);  
    },  
  }, 
  computed: {
    ...mapGetters(['floatCount'])
  }, 
};  
</script>  
<style scoped>  
.fixed-icon-container {  
  position: absolute; /* 改为 absolute，因为我们会动态设置 top 和 left */  
  z-index: 999;  
  width: 65px;  
  height: 65px;  
  display: flex;  
  align-items: center;  
  justify-content: center;  
  border-radius: 40px;  
  background: rgba(0, 186, 173, 1);  
  cursor: move; /* 当鼠标悬停在图标上时显示可移动的光标   */
}    
.fixed-icon { 
  height: 35px;
  width: 40px;
  /* background-color: blue; */
  background-size: contain; /* 确保图片适应元素大小 */  
  background-repeat: no-repeat; /* 不重复背景图片 */ 
}   
.badge {  
  position: absolute;  
  top: 0px;  
  right: 0px;  
  width: 20px;  
  height: 20px;  
  line-height: 20px;  
  text-align: center;  
  color: white;  
  font-size: 12px;  
  background-color: red;  
  border-radius: 50%;  
  display: flex;  
  justify-content: center;  
  align-items: center;  
}  
</style>